"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { FileText, Search } from "lucide-react"

// 模拟数据
const extractedKeywords = [
  { id: 1, text: "微分方程", weight: 10, category: "主题" },
  { id: 2, text: "一阶微分方程", weight: 8, category: "主题" },
  { id: 3, text: "可分离变量", weight: 7, category: "方法" },
  { id: 4, text: "线性微分方程", weight: 9, category: "主题" },
  { id: 5, text: "常微分方程", weight: 6, category: "主题" },
  { id: 6, text: "通解", weight: 5, category: "概念" },
  { id: 7, text: "特解", weight: 5, category: "概念" },
  { id: 8, text: "初值问题", weight: 7, category: "应用" },
  { id: 9, text: "边值问题", weight: 6, category: "应用" },
  { id: 10, text: "欧拉方法", weight: 4, category: "方法" },
  { id: 11, text: "龙格库塔方法", weight: 3, category: "方法" },
  { id: 12, text: "伯努利方程", weight: 5, category: "主题" },
]

const lectureTranscripts = [
  {
    id: "transcript-001",
    title: "数学 101 - 微分方程",
    date: "2024-04-25",
    duration: "90分钟",
  },
  {
    id: "transcript-002",
    title: "物理 201 - 电磁学",
    date: "2024-04-24",
    duration: "90分钟",
  },
  {
    id: "transcript-003",
    title: "化学 301 - 有机化学",
    date: "2024-04-23",
    duration: "90分钟",
  },
]

export function KeywordExtraction() {
  const [selectedTranscript, setSelectedTranscript] = useState<string | null>(null)
  const [analyzing, setAnalyzing] = useState(false)
  const [showResults, setShowResults] = useState(false)

  const handleAnalyze = (transcriptId: string) => {
    setSelectedTranscript(transcriptId)
    setAnalyzing(true)

    // 模拟分析过程
    setTimeout(() => {
      setAnalyzing(false)
      setShowResults(true)
    }, 1500)
  }

  const getWeightClass = (weight: number) => {
    if (weight >= 9) return "bg-primary text-primary-foreground text-base px-3 py-1"
    if (weight >= 7) return "bg-primary/80 text-primary-foreground"
    if (weight >= 5) return "bg-primary/60 text-primary-foreground"
    return "bg-primary/40 text-primary-foreground text-xs"
  }

  const getCategoryColor = (category: string) => {
    switch (category) {
      case "主题":
        return "bg-blue-500"
      case "方法":
        return "bg-green-500"
      case "概念":
        return "bg-yellow-500"
      case "应用":
        return "bg-purple-500"
      default:
        return "bg-gray-500"
    }
  }

  return (
    <Card className="h-full">
      <CardHeader>
        <CardTitle>关键词提取</CardTitle>
        <CardDescription>从讲课内容中提取关键词和主题</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="keywords" className="h-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="keywords">关键词云</TabsTrigger>
            <TabsTrigger value="transcripts">讲课记录</TabsTrigger>
          </TabsList>

          <TabsContent value="keywords" className="space-y-4">
            {showResults ? (
              <>
                <div className="flex items-center justify-between mb-2">
                  <h3 className="text-sm font-medium">提取的关键词</h3>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" onClick={() => setShowResults(false)}>
                      返回
                    </Button>
                    <Button variant="outline" size="sm">
                      导出
                    </Button>
                  </div>
                </div>

                <div className="p-4 bg-muted/40 rounded-lg min-h-[200px] flex flex-wrap gap-2 justify-center items-center">
                  {extractedKeywords.map((keyword) => (
                    <Badge
                      key={keyword.id}
                      className={`${getWeightClass(keyword.weight)} cursor-pointer hover:bg-primary/90 transition-colors`}
                    >
                      {keyword.text}
                    </Badge>
                  ))}
                </div>

                <div className="mt-4">
                  <h3 className="text-sm font-medium mb-2">按类别分组</h3>
                  <div className="space-y-3">
                    {["主题", "方法", "概念", "应用"].map((category) => (
                      <div key={category} className="space-y-1">
                        <div className="flex items-center gap-2">
                          <div className={`w-3 h-3 rounded-full ${getCategoryColor(category)}`}></div>
                          <span className="text-sm font-medium">{category}</span>
                        </div>
                        <div className="flex flex-wrap gap-2 ml-5">
                          {extractedKeywords
                            .filter((k) => k.category === category)
                            .map((keyword) => (
                              <Badge key={keyword.id} className={`${getCategoryColor(category)} text-white`}>
                                {keyword.text}
                              </Badge>
                            ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </>
            ) : (
              <div className="text-center p-8 text-muted-foreground">
                <Search className="h-12 w-12 mx-auto mb-4 opacity-50" />
                <p>请从"讲课记录"标签中选择一个记录进行关键词提取</p>
              </div>
            )}
          </TabsContent>

          <TabsContent value="transcripts">
            <div className="space-y-4">
              {lectureTranscripts.map((transcript) => (
                <div
                  key={transcript.id}
                  className={`p-4 border rounded-lg hover:bg-muted/50 transition-colors cursor-pointer ${
                    analyzing && selectedTranscript === transcript.id ? "bg-muted/50" : ""
                  }`}
                  onClick={() => !analyzing && handleAnalyze(transcript.id)}
                >
                  <div className="flex items-start justify-between">
                    <div>
                      <h3 className="font-medium">{transcript.title}</h3>
                      <p className="text-sm text-muted-foreground">
                        {transcript.date} · {transcript.duration}
                      </p>
                    </div>
                    {analyzing && selectedTranscript === transcript.id ? (
                      <div className="flex items-center gap-2">
                        <div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full"></div>
                        <span className="text-sm">分析中...</span>
                      </div>
                    ) : (
                      <Button variant="outline" size="sm">
                        <Search className="h-4 w-4 mr-1" />
                        提取关键词
                      </Button>
                    )}
                  </div>
                </div>
              ))}

              <div className="flex items-center justify-center p-4 border border-dashed rounded-lg">
                <Button variant="outline">
                  <FileText className="h-4 w-4 mr-2" />
                  上传新的讲课记录
                </Button>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
